<p id="subtitle"><?php echo TXT_DIMENSIONS; ?></p>

<script>
    $(function(){      
        $('#horizontalMenuGen').tabs({ select: function(event,ui) {
                if (ui.panel.id == "content-4") {
                    $("#dimImgs *").addClass("cacher");
                    $("#dimCells *").addClass("cacher");
                
                    var value=$('input[name=shape]:checked', '#gen').val();
     
                    //Square
                    if (value == 1){                           
                        $("#dimImgs #mSquare").removeClass("cacher");
                        $("#dimCells #mH , #dimCells #mH *").removeClass("cacher");
                        $("#dimCells #m1 , #dimCells #m1 *").removeClass("cacher");
                        $("#dimCells #surface , #dimCells #surface *").removeClass("cacher");
                    }
                    //Rectangle
                    if(value == 2){ 
                        $("#dimImgs #mRect").removeClass("cacher");
                        $("#dimCells #mH , #dimCells #mH *").removeClass("cacher");
                        $("#dimCells #m1 , #dimCells #m1 *").removeClass("cacher");
                        $("#dimCells #m2 , #dimCells #m2 *").removeClass("cacher");
                        $("#dimCells #surface , #dimCells #surface *").removeClass("cacher");
                    }
                    //Shape L
                    if(value == 3){  
                        $("#dimImgs #mL").removeClass("cacher");
                        $("#dimCells #mH , #dimCells #mH *").removeClass("cacher");
                        $("#dimCells #m1 , #dimCells #m1 *").removeClass("cacher");
                        $("#dimCells #m2 , #dimCells #m2 *").removeClass("cacher");
                        $("#dimCells #m3 , #dimCells #m3 *").removeClass("cacher");
                        $("#dimCells #m4 , #dimCells #m4 *").removeClass("cacher");
                        $("#dimCells #surface , #dimCells #surface *").removeClass("cacher");
                    }
                    //Shape U
                    if(value == 4){   
                        $("#dimImgs #mU").removeClass("cacher");
                        $("#dimCells #mH , #dimCells #mH *").removeClass("cacher");
                        $("#dimCells #m1 , #dimCells #m1 *").removeClass("cacher");
                        $("#dimCells #m2 , #dimCells #m2 *").removeClass("cacher");
                        $("#dimCells #m3 , #dimCells #m3 *").removeClass("cacher");
                        $("#dimCells #m6 , #dimCells #m6 *").removeClass("cacher");
                        $("#dimCells #surface , #dimCells #surface *").removeClass("cacher");
                    }
                    //Shape Shifted
                    if(value == 5){
                        $("#dimImgs #mShift").removeClass("cacher");
                        $("#dimCells #mH , #dimCells #mH *").removeClass("cacher");
                        $("#dimCells #m1 , #dimCells #m1 *").removeClass("cacher");
                        $("#dimCells #m2 , #dimCells #m2 *").removeClass("cacher");
                        $("#dimCells #m4 , #dimCells #m4 *").removeClass("cacher");
                        $("#dimCells #m5 , #dimCells #m5 *").removeClass("cacher");
                        $("#dimCells #m6 , #dimCells #m6 *").removeClass("cacher");
                        $("#dimCells #m7 , #dimCells #m7 *").removeClass("cacher");
                        $("#dimCells #surface , #dimCells #surface *").removeClass("cacher");
                    }
                    //Shape T
                    if(value == 6){
                        $("#dimImgs #mT").removeClass("cacher");
                        $("#dimCells #mH , #dimCells #mH *").removeClass("cacher");
                        $("#dimCells #m1 , #dimCells #m1 *").removeClass("cacher");
                        $("#dimCells #m2 , #dimCells #m2 *").removeClass("cacher");
                        $("#dimCells #m4 , #dimCells #m4 *").removeClass("cacher");
                        $("#dimCells #m5 , #dimCells #m5 *").removeClass("cacher");
                        $("#dimCells #surface , #dimCells #surface *").removeClass("cacher");
                    }
                }
            }
        });});    
</script>

<div id="dimFormContent" style="height: 400px;">
    <div style="height: 130px; background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
        <table>
            <tr>
                <th style=" vertical-align: top; padding-top: 5px; text-align: left;">
                    <!--   Hauteur du faîte-->
                    Faîte du toit<br/>           
                </th>
                <td>
                </td>
            </tr>
            <tr>
            <tr>
                <td style=" vertical-align: top; text-align: center;">
                    <!--   Hauteur du faîte-->
                    <img id="ridge" src="../images/forms/wallsDimensions/ridge.gif" style=" alignment-adjust: central"/>
                </td>
                <td  style="vertical-align: bottom;">
                    <div class="dimTxt"><?php echo TXT_RIDGE; ?>:</div>
                    <input name="inputRidge" id="inputRidge" class="inputNumberField4" style="width: 50px;" onkeyup="generalities[2].processValidation()" onblur="updateProgressBar()"/> m
                </td>
                <td id="inputRidgeErrorMsg" style="vertical-align: bottom"></td>
            </tr>
        </table>
    </div>
    <div style="height: 250px; background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
        <table style="width: 1000px;">
            <tr>
                <th style="vertical-align: top; padding-top: 5px; text-align: left;">
                    <?php echo TXT_WALL ?>s
            <div id="dimFormContent" style="padding-right: 50px; padding-top: 10px;">
                <div id="dimImgs">
                    <img id="mSquare" src="../images/forms/wallsDimensions/3dSquare.gif" height="220px"/>
                    <img id="mRect" src="../images/forms/wallsDimensions/3dRectangle.gif" height="220px"/>
                    <img id="mL" width="185px" src="../images/forms/wallsDimensions/3dL.gif" height="220px"/>
                    <img id="mU" src="../images/forms/wallsDimensions/3dU.gif" height="220px"/>
                    <img id="mShift" src="../images/forms/wallsDimensions/3dShiftedRectangle.gif" height="220px"/>
                    <img id="mT" src="../images/forms/wallsDimensions/3dT.gif" height="220px"/>
                </div>
            </div>           
            </th>
            <td style="padding-top: 60px; width: 70%">
                <div id="dimCells">      
                    <div id="mH">
                        <div class="dimTxt" style="margin-right: 25px;">
                            <?php echo TXT_DIMENSION; ?> H: 
                        </div>
                        <div class="dimCell">
                            <input name="inputH" class="inputNumberField4"  id="inputH" style="width: 40px;" onkeyup="generalities[3].processValidation()" onblur="updateProgressBar()"/> m
                        </div>
                        <div id="inputHErrorMsg" style="float:left; padding-left: 10px;"></div>
                    </div>
                    <div id="m1" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M1: </div><div class="dimCell"><input id="M1" class="changeArea inputNumberField4" name="inputM1" style="width: 40px;" onchange="claculate();" onkeyup="generalities[4].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M1_errorMsg"></div></div>
                    <div id="m2" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M2: </div><div class="dimCell"><input id="M2" class="changeArea inputNumberField4" name="inputM2" style="width: 40px;" onchange="claculate();" onkeyup="generalities[5].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M2_errorMsg"></div></div>
                    <div id="m3" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M3: </div><div class="dimCell"><input id="M3" class="changeArea inputNumberField4" name="inputM3" style="width: 40px;" onchange="claculate();" onkeyup="generalities[6].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M3_errorMsg"></div></div>
                    <div id="m4" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M4: </div><div class="dimCell"><input id="M4" class="changeArea inputNumberField4" name="inputM4" style="width: 40px;" onchange="claculate();" onkeyup="generalities[7].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M4_errorMsg"></div></div>
                    <div id="m5" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M5: </div><div class="dimCell"><input id="M5" class="changeArea inputNumberField4" name="inputM5" style="width: 40px;" onchange="claculate();" onkeyup="generalities[8].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M5_errorMsg"></div></div>
                    <div id="m6" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M6: </div><div class="dimCell"><input id="M6" class="changeArea inputNumberField4" name="inputM6" style="width: 40px;" onchange="claculate();" onkeyup="generalities[9].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M6_errorMsg"></div></div>
                    <div id="m7" style="clear: both;"><div  class="dimTxt"><?php echo TXT_DIMENSION; ?> M7: </div><div class="dimCell"><input id="M7" class="changeArea inputNumberField4" name="inputM7" style="width: 40px;" onchange="claculate();" onkeyup="generalities[10].processValidation()" onblur="updateProgressBar()"/> m</div><div class="divErrorMsgSized" id="M7_errorMsg"></div></div>
                    <div id="surface" style="clear: both;">
                        <div  class="dimTxt" style="margin-right: 20px;">
                            <?php echo TXT_AREA; ?> :<img src="../images/help.png" id="tooltip" title="<?php echo TXT_HELP_AREA; ?>" />
                        </div>
                        <div class="dimCell">
                            <input type="number" class="changeWallsArea inputNumberField4" id="area" readonly name="area" onblur="updateProgressBar()" /> m² <input id="modifArea" type="checkbox" onclick="modifyArea();"/><?php echo TXT_DIMENSION_EDIT; ?>
                            <div id="area_errorMsg"></div>
                        </div>
                    </div>
                </div>
            </td>
            </tr>
        </table>
    </div>
</div>
<script>
    //Calcul et modification de la surface de la maison depuis les valeurs entrées
    var floors =   document.getElementById("floorsOccupied");
    var m1 = document.getElementById("M1");
    var m2 = document.getElementById("M2");
    var m3 = document.getElementById("M3");
    var m4 = document.getElementById("M4");
    var m5 = document.getElementById("M5");
    var m6 = document.getElementById("M6");
    var m7 = document.getElementById("M7");

    var area = document.getElementById("area");
    

 
    //Fonction appelée à chaque modification des valeurs (NbFloors et M1...n)
    $('.changeArea').live('change', function() {
        
        //Récupération de l'id de la forme choisi
        var shape = $('input[name=shape]:checked', '#gen').val();
        
        //Calcul de la superficie selon la forme
        switch(shape){
            //Square
            case '1':   
                if(m1.value != ''){
                    if(floors.value != generalities[1].getDefaultValue()){
                        area.value = m1.value * m1.value * floors.value;
                    }
                    else{
                        area.value = m1.value * m1.value;// Si le nombre d'étages n'est pas rempli (1 étage par défault)            
                    }
                }
                break;
        
            //Rectangle
        case '2':
    
            if(m1.value != ''){
                if(m2.value != ''){
                    if(floors.value != generalities[1].getDefaultValue()){
                        area.value = m1.value * m2.value * floors.value;
                    }
                    else{
                        area.value = m1.value * m2.value// Si le nombre d'étages n'est pas rempli (1 étage par défault)
                    }
                }
            }
            break;
            
        //Shape L
    case '3':

        if(m1.value != ''){
            if(m2.value != ''){
                if(m3.value != ''){
                    if(m4.value != ''){
                        if(floors.value != generalities[1].getDefaultValue()){
                            area.value = m1.value * m4.value + (m2.value - m4.value) * m3.value * floors.value;
                        }
                        else{
                            area.value = m1.value * m4.value + (m2.value - m4.value) * m3.value;// Si le nombre d'étages n'est pas rempli (1 étage par défault)  
                        }
                    }
                }
            }
        }
        break;

    //Shape U
case '4':
    if(m1.value != ''){
        if(m2.value != ''){
            if(m3.value != ''){
                if(m6.value != ''){
                    if(floors.value != generalities[1].getDefaultValue()){
                        area.value = m2.value * m3.value - (m6.value * (m2.value - (2 * m1.value))) * floors.value;
                    }
                    else{
                        area.value = m2.value * m3.value - (m6.value * (m2.value - (2 * m1.value)));// Si le nombre d'étages n'est pas rempli (1 étage par défault)  
                    }
                }
            }
        }
    }
    
    break;

//Shape Shifted
case '5':

if(m1.value != ''){
    if(m2.value != ''){
        if(m4.value != ''){
            if(m5.value != ''){
                if(m6.value != ''){
                    if(m7.value != ''){
                        if(floors.value != generalities[1].getDefaultValue()){
                            area.value = m1.value * m2.value + m6.value * (m7.value - m4.value) + (m4.value * m5.value) * floors.value;
                        }
                        else{
                            area.value = m1.value * m2.value + m6.value * (m7.value - m4.value) + (m4.value * m5.value);// Si le nombre d'étages n'est pas rempli (1 étage par défault)  
                        }
                    }
                }
            }
        }
    }
}
break;
//Shape T
case '6':
if(m1.value != ''){
if(m2.value != ''){
    if(m4.value != ''){
        if(m5.value != ''){
            if(floors.value != generalities[1].getDefaultValue()){
                area.value = (m1.value * m2.value) + (m4.value * m5.value) * floors.value;
            }
            else{
                area.value = (m1.value * m2.value) + (m4.value * m5.value);// Si le nombre d'étages n'est pas rempli (1 étage par défault)  
            }
        }
    }
}

}
    
break;
}

//appel de la méthode qui va calculer la superficie du sol et plafond (si besoin)
displayCeilingFloor();

//appel de la méthode pour le calcul de la superficie des murs
calculateWallsArea();

});
    
function modifyArea(){
    var modif = document.getElementById("modifArea");

    if(modif.checked){
        area.removeAttribute('readonly');
        generalities[14].setIsDisabled(false);
    }
    else{
        area.setAttribute('readonly', 'readonly');
        generalities[14].setIsDisabled(true);
    }
}
</script>


